<template>
  <div class="list">
    <h2>故事列表</h2>
    <card
      class="card"
      v-for="item in ResultData.list"
      :title="item.title"
      :key="item.id"
    >
      <p v-html="item.content"></p>
      <span class="time">{{ formatUtcString(item.createAt) }}</span>
    </card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { formatUtcString } from '../../../../../../ultills/date-format'
import card from '../../../../../../base-ui/card/src/card.vue'
import { getStory } from '../../../../../../service/mian/system/system'
export default defineComponent({
  components: { card },
  name: 'list',
  setup() {
    const ResultData = ref()
    getStory('/story/list').then((res) => {
      console.log(res.data)
      ResultData.value = res.data
    })

    return { ResultData, formatUtcString }
  }
})
</script>

<style scoped>
.list {
  text-align: left;
  background-color: #f0f2f5;
}
.card {
  margin-top: 30px;
}
</style>
